<template>
    <div class="tinymce-editor">
        <editor v-model="myValue"
        :init="init"
        @onClick="onClick">
        </editor>
        <el-button type="success">发布文章</el-button>
    </div>
</template>
<script>
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver'
// 编辑器插件plugins
import 'tinymce/plugins/image'// 插入上传图片插件
import 'tinymce/plugins/media'// 插入视频插件
import 'tinymce/plugins/table'// 插入表格插件
import 'tinymce/plugins/lists'// 列表插件
import 'tinymce/plugins/wordcount'// 字数统计插件
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/fullscreen'
import 'tinymce/plugins/preview'

export default {
    data(){
        return{
            init: {
                language_url: '@/assets/tinymce/zh_CN.js',
                language: 'zh_CN',
                skin_url: '@/assets/tinymce/skins/ui/oxide',
                // skin_url: '/tinymce/skins/ui/oxide-dark',//暗色系
                height: 300,
                plugins:'lists image media table wordcount link code contextmenu colorpicker fullscreen preview',
                toolbar:this.toolbar,
                branding: true,
                menubar: true,
                // 此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，
                images_upload_handler: (blobInfo, success, failure) => {
                    const img = 'data:image/jpeg;base64,' + blobInfo.base64()
                    success(img)
                }
            },
            myValue: this.value
        }
    },
    watch:{
        value (newValue) {
            this.myValue = newValue
        },
        myValue (newValue) {
            this.$emit('input', newValue)
        }
    },
    components: {
        Editor,tinymce
    },
    mounted(){
        tinymce.init({})
    },
    methods:{
        onClick (e) {
            this.$emit('onClick', e, tinymce)
        },
        // 可以添加一些自己的自定义事件，如清空内容
        clear () {
            this.myValue = ''
        }
    },
  
}
</script>
<style scoped>

</style>


